import React, { PureComponent } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableNativeFeedback,
} from 'react-native';
import ZlstIcon from './zlst-icons';
import { red } from 'ansi-colors';

class PushItem extends PureComponent {
  settingProps = {
    numberOfLines: 2,
  }

  constructor(props) {
    super(props);
    this.state = {
      showMore: true,
      maxHeight: null,
      numberOfLines: null,
      needShowMore: false,
    };
  }

  _showOrHide = () => {
    this.setState(preState => {
      const showMore = !preState.showMore;
      return ({
        showMore,
        numberOfLines: showMore ? this.settingProps.numberOfLines : null,
      });
    });
  }

  textLayout = (event) => {
    const { height } = event.nativeEvent.layout;
    if (this.state.maxHeight === null) { // 第一次测量
      this.setState({
        maxHeight: height,
        numberOfLines: this.settingProps.numberOfLines,
      });
    } else if (this.state.numberOfLines) {
      if (this.state.maxHeight > height) { // 第二次测量，最大高度大于设置行数之后的高度
        this.setState({
          needShowMore: true,
        });
      }
    }
  }

  getTextContent = (str) => {
    if (!str) return null;
    const arr = str.split(/【|】/); // 字符串拆分成数组
    const list = [];
    for (let i = 0, len = arr.length; i < len; i += 1) {
      const item = arr[i];
      if (/(http:(\S*))|(https:(\S*))/.test(item)) {
        list.push(
          <Text
            key={i}
            style={styles.linkFont}
            onPress={() => { this.props.openWebView(item); }}
          >
            【{item}】
          </Text>,
        );
      } else {
        list.push(
          item,
        );
      }
    }
    return list;
  }

  render() {
    const { item } = this.props;
    return (
      <View>
        <TouchableNativeFeedback
          onPress={this._showOrHide}
        >
          <View style={styles.container}>
            <View style={styles.title}>
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                {item.isReaded == '0' && (<Text style={styles.circle} />)}
                <Text
                  style={{ fontSize: 16, color: '#BDBDBD' }}
                >
                  {item.title}
                </Text>
              </View>
              <Text
                style={{ fontSize: 16, color: '#BDBDBD' }}
              >
                {item.time}
              </Text>
            </View>
            <View style={styles.textContent}>
              <Text
                style={styles.font}
                numberOfLines={this.state.numberOfLines}
                ellipsizeMode="tail"
                onLayout={this.textLayout}
              >
                {this.getTextContent(item.content)}
              </Text>
              {/* <Text
                style={styles.font}
                numberOfLines={this.state.numberOfLines}
                ellipsizeMode="tail"
                onLayout={this.textLayout}
              >
                {item.content}
                <Text
                  style={styles.linkFont}
                  onPress={openWebView}
                >
                  {this.getReportUrl(item.content)}
                </Text>
              </Text> */}
            </View>
            {this.state.needShowMore && (
              <View style={styles.operate}>
                <ZlstIcon
                  style={this.state.showMore ? styles.show : styles.hide}
                  name="fanhui"
                  size={14}
                  color="#03A9F4"
                />
                <Text style={[styles.font, styles.showMore]}>
                  {this.state.showMore ? '展开' : '收起'}
                </Text>
              </View>)}
          </View>
        </TouchableNativeFeedback>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffff',
    padding: 4,
    borderRadius: 4,
    marginTop: 8,
    marginLeft: 8,
    marginRight: 8,
  },
  title: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 4,
  },
  circle: {
    height: 10,
    width: 10,
    borderRadius: 5,
    marginRight: 5,
    backgroundColor: 'red',
  },
  textContent: {
    padding: 4,
  },
  showMore: {
    fontSize: 16,
    color: '#03A9F4',
  },
  operate: {
    display: 'flex',
    flexDirection: 'row',
    paddingTop: 2,
    paddingBottom: 2,
    borderStyle: 'solid',
    borderColor: '#BDBDBD',
    borderTopWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  font: {
    fontSize: 16,
  },
  linkFont: {
    color: '#BDBDBD',
    textDecorationLine: 'underline',
    textDecorationColor: '#BDBDBD',
    fontStyle: 'italic',
  },
  show: {
    transform: [
      {
        rotate: '-90deg',
      },
    ],
  },
  hide: {
    transform: [
      {
        rotate: '90deg',
      },
    ],
  },
});

export default PushItem;
